import React, {Component} from 'react';
import cssModule from './SearchPage.module.less'

import {SearchBar, Button, WhiteSpace, WingBlank} from 'antd-mobile';

class SearchPage extends Component {
    state = {
        searchValue: '',
    };

    onChange = (value) => {
        this.setState({searchValue: value});
    };

    render() {
        return (
            <div>
                {/*搜索栏*/}
                <SearchBar
                    value={this.state.searchValue}
                    placeholder="搜索公司/职位/内容"
                    onSubmit={value => console.log(value, 'onSubmit')}
                    onClear={value => this.setState({searchValue: ""})}
                    onFocus={() => console.log('onFocus')}
                    onBlur={() => console.log('onBlur')}
                    onCancel={() => this.props.history.goBack()}
                    showCancelButton
                    onChange={(e) => this.onChange(e)}/>
                <div className='paddlr10'>
                    {/*全部岗位类型*/}
                    <div className='ShowAllPost flex ali-cen just-spa-bet padd12 '>
                        <div className='flex ali-cen'>
                            <i className='iconfont fo-26 mr10'>&#xe792;</i>
                            <p className='font-wei600 fo-16'>全部岗位类型</p>
                        </div>
                        <i className='iconfont fo-gray fo-20'>&#xe743;</i>
                    </div>
                    {/*历史搜索*/}
                    <section className='flex ali-cen just-spa-bet mt30'>
                        <p className='font-wei600 fo-18'>历史搜索</p>
                        <i className='iconfont fo-12 fo-gray'>&#xe900;</i>
                    </section>
                    {/*历史搜索的tag记录*/}
                    <section className='flex ali-cen flex-wrap mt14'>
                        <span className='mr10 mb10 bg-lightGray padd12 radius6 fo-12 '>HTML</span>
                        <span className='mr10 mb10 bg-lightGray padd12 radius6 fo-12 '>CSS</span>
                        <span className='mr10 mb10 bg-lightGray padd12 radius6 fo-12 '>JS</span>
                        <span className='mr10 mb10 bg-lightGray padd12 radius6 fo-12 '>VUE</span>
                        <span className='mr10 mb10 bg-lightGray padd12 radius6 fo-12 '>React</span>
                        <span className='mr10 mb10 bg-lightGray padd12 radius6 fo-12 '>radius</span>
                        <span className='mr10 mb10 bg-lightGray padd12 radius6 fo-12 '>golang</span>
                        <span className='mr10 mb10 bg-lightGray padd12 radius6 fo-12 '>python</span>
                        <span className='mr10 mb10 bg-lightGray padd12 radius6 fo-12 '>mysql</span>
                    </section>
                    {/*推荐*/}
                    <section className='flex ali-cen just-spa-bet mt30'>
                        <p className='font-wei600 fo-18'>基于专业推荐</p>
                    </section>
                    {/*历史搜索的tag记录*/}
                    <section className='flex ali-cen flex-wrap mt14'>
                        <span className='mr10 mb10 bg-lightGray padd12 radius6 fo-12 '>HTML</span>
                        <span className='mr10 mb10 bg-lightGray padd12 radius6 fo-12 '>CSS</span>
                        <span className='mr10 mb10 bg-lightGray padd12 radius6 fo-12 '>JS</span>
                        <span className='mr10 mb10 bg-lightGray padd12 radius6 fo-12 '>VUE</span>
                        <span className='mr10 mb10 bg-lightGray padd12 radius6 fo-12 '>React</span>
                        <span className='mr10 mb10 bg-lightGray padd12 radius6 fo-12 '>radius</span>
                        <span className='mr10 mb10 bg-lightGray padd12 radius6 fo-12 '>golang</span>
                        <span className='mr10 mb10 bg-lightGray padd12 radius6 fo-12 '>python</span>
                        <span className='mr10 mb10 bg-lightGray padd12 radius6 fo-12 '>mysql</span>
                    </section>
                </div>
            </div>
        );
    }
}

export default SearchPage;